<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 查询、新建列表切换 -->
    <el-row>
      <el-button type="primary" plain @click="show(1)">查询员工信息</el-button>
      <el-button type="success" plain @click="show(2)">新建员工</el-button>
    </el-row>
    <br />
    <!-- 查询 -->
    <!-- 查询员工 -->
    <el-form
      :inline="true"
      :model="form1"
      class="demo-form-inline"
      v-show="isShow1"
    >
      <el-form-item label="员工工号：" style="margin-right: 10px">
        <el-input
          v-model="form1.gonghao"
          placeholder="请输入员工工号"
        ></el-input>
      </el-form-item>
      <el-form-item label="员工姓名：" style="margin-right: 10px">
        <el-input
          v-model="form1.xingming"
          placeholder="请输入员工姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handlequery">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 员工信息 -->
    <el-table :data="staffData" style="width: 100%" border v-show="isShow1">
      <el-table-column prop="UserName" label="姓名"> </el-table-column>
      <el-table-column prop="Sex" label="性别"> </el-table-column>
      <el-table-column prop="UserGH" label="工号"> </el-table-column>
      <el-table-column prop="PassWord" label="密码"> </el-table-column>
      <el-table-column prop="Email" label="邮箱"> </el-table-column>
      <el-table-column prop="Position" label="职位"> </el-table-column>
      <el-table-column prop="Department" label="部门"> </el-table-column>
      <el-table-column prop="Telephone" label="电话号码"> </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="
              handlexiugai(scope.row, scope.row.UserGH),
                (dialogFormVisible = true)
            "
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handledel(scope.row, scope.row.UserGH)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹窗 -->
    <el-dialog title="修改员工信息：" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="密码：" :label-width="formLabelWidth">
          <el-input
            autocomplete="off"
            v-model="xiugaiTable.PassWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="xiugaiTable.Email"></el-input>
        </el-form-item>
        <el-form-item label="职位：" :label-width="formLabelWidth">
          <el-select
            v-model="xiugaiTable.Position"
            autocomplete="off"
            placeholder="请选择职位"
          >
            <el-option
              v-for="item in Position"
              :key="item.PositionId"
              :label="item.Position"
              :value="item.PositionId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门：" :label-width="formLabelWidth">
          <el-select
            v-model="xiugaiTable.Department"
            autocomplete="off"
            placeholder="请选择部门"
          >
            <el-option
              v-for="item in Department"
              :key="item.DepartmentId"
              :label="item.Department"
              :value="item.DepartmentId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码：" :label-width="formLabelWidth">
          <el-input
            autocomplete="off"
            v-model="xiugaiTable.Telephone"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogFormVisible = false), xiugaienter()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 新建员工 -->
    <el-form
      ref="form"
      :model="sizeForm"
      label-width="100px"
      size="mini"
      v-show="isShow2"
      style="width: 700px; position: relative; left: 285px"
    >
      <el-form-item label="姓名：">
        <el-input v-model="sizeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-select v-model="sizeForm.sex" placeholder="男">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日：">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="sizeForm.birthday"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="工号：">
        <el-input v-model="sizeForm.gonghao"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="sizeForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="sizeForm.email"></el-input>
      </el-form-item>
      <el-form-item label="职位：">
        <el-select v-model="sizeForm.zhiwei" placeholder="行政部">
          <el-option label="行政部" value="0"></el-option>
          <el-option label="人事部" value="1"></el-option>
          <el-option label="后勤部" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门：">
        <el-select v-model="sizeForm.bumen" placeholder="部门经理">
          <el-option label="部门经理" value="0"></el-option>
          <el-option label="员工" value="1"></el-option>
          <el-option label="其他成员" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号：">
        <el-input v-model="sizeForm.idcard"></el-input>
      </el-form-item>
      <el-form-item label="电话：">
        <el-input v-model="sizeForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="家庭住址：">
        <el-input v-model="sizeForm.address"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="handleadd()">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import Qs from "../../node_modules/qs";
export default {
  data() {
    return {
      isShow1: true, // 查询显示
      isShow2: false, // 新建隐藏
      staffData: [], // 员工信息列表
      Department: [], // 初始化所有部门信息
      Position: [], // 所有职位信息
      // 查询员工
      form1: {
        gonghao: "", // 工号
        xingming: "", // 姓名
        id: "",
      },
      form: {
        UserName: "",
        Sex: "",
        UserGH: "",
        PassWord: "",
        Email: "",
        Position: "",
        Department: "",
        Telephone: "",
      },
      dialogFormVisible: false, // 默认隐藏修改弹窗
      xiugaiTable: [], // 绑定修改数组
      formLabelWidth: "90px", // 修改弹窗输入框宽度
      bid: "", // 变量id
      // 新增员工
      sizeForm: {
        name: "", // 姓名
        sex: "", // 性别
        birthday: "", // 生日
        gonghao: "", // 工号
        password: "", // 密码
        email: "", // 邮箱
        zhiwei: "", // 职位
        bumen: "", // 部门
        idcard: "", // 身份证号
        phone: "", // 电话
        address: "", // 家庭地址
      },
    };
  },
  methods: {
    // 页面刷新
    reshow() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/allstaff",
      }).then(function (res) {
        that.staffData = res.data.data;
      });
    },
    // 清空
    empty() {
      this.sizeForm.gonghao = "";
      this.sizeForm.bumen = "";
      this.sizeForm.zhiwei = "";
      this.sizeForm.name = "";
      this.sizeForm.password = "";
      this.sizeForm.sex = "";
      this.sizeForm.birthday = "";
      this.sizeForm.idcard = "";
      this.sizeForm.phone = "";
      this.sizeForm.address = "";
      this.sizeForm.email = "";
    },
    // 查询、新建列表切换
    show(e) {
      if (e == 1) {
        this.isShow1 = true;
        this.isShow2 = false;
        this.reshow();
      } else {
        this.isShow1 = false;
        this.isShow2 = true;
      }
    },
    // 模糊查询员工信息
    handlequery() {
      let that = this;
      let params = {
        num: this.form1.gonghao,
        name: this.form1.xingming,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchstaff",
        data: Qs.stringify(params),
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      }).then(function (res) {
        that.staffData = res.data.data;
      });
    },
    // 修改员工信息
    handlexiugai(val, idd) {
      this.dialogFormVisible = true;
      this.bid = idd;
      this.$set(this.xiugaiTable, "PassWord", val.PassWord.toString());
      this.$set(this.xiugaiTable, "Email", val.Email.toString());
      this.$set(this.xiugaiTable, "Position", val.Position.toString());
      this.$set(this.xiugaiTable, "Department", val.Department.toString());
      this.$set(this.xiugaiTable, "Telephone", val.Telephone.toString());
    },
    // 修改写入
    xiugaienter() {
      let that = this;
      let params = {
        PassWord: this.xiugaiTable.PassWord,
        Email: this.xiugaiTable.Email,
        PositionId: this.xiugaiTable.Position,
        DepartmentId: this.xiugaiTable.Department,
        Telephone: this.xiugaiTable.Telephone,
        UserGH: this.bid,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/changestaff",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        data: Qs.stringify(params),
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("修改成功");
        } else {
          alert("修改失败");
        }
        that.dialogFormVisible = false;
        that.reshow();
      });
    },
    // 删除员工信息
    handledel(val) {
      let id = val.UserGH;
      let that = this;
      axios({
        method: "get",
        url: `http://127.0.0.1:9090/delstaff?id=${id}`,
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("删除成功");
          that.reshow();
        } else {
          alert("删除失败");
        }
        that.reshow();
      });
    },
    // 新增员工
    handleadd() {
      let that = this;
      let birthday = new Date(this.sizeForm.birthday).toLocaleDateString();
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/addstaff",
        data: {
          uobj: {
            usergh: this.sizeForm.gonghao, // 工号
            departmenttype: this.sizeForm.bumen, // 部门
            positiontype: this.sizeForm.zhiwei, // 职位
            username: this.sizeForm.name, // 姓名
            password: this.sizeForm.password, // 密码
            sex: this.sizeForm.sex, // 性别
            birthday: birthday, // 生日
            idcard: this.sizeForm.idcard, // 身份证号
            telephone: this.sizeForm.phone, // 电话
            address: this.sizeForm.address, // 地址
            email: this.sizeForm.email, // 邮箱
            userpic: "",
            loginstate: "1",
          },
        },
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("添加成功");
          that.empty();
        } else {
          alert("添加失败");
          that.empty();
        }
      });
    },
    // 获取所有职位信息
    getpositiondate() {
      var that = this;
      this.$axios.get("/allposition").then((res) => {
        that.Position = res.data.data;
      });
    },
    // 获取所有部门信息
    getdepartmentdate() {
      var that = this;
      this.$axios.get("/allpart").then((res) => {
        that.Department = res.data.data;
      });
    },
  },
  created() {
    this.reshow();
    this.getpositiondate();
    this.getdepartmentdate();
  },
};
</script>

<style scoped>
/* 列表切换、模糊查询左对齐 */
.el-row,
.el-form {
  text-align: left;
}
/* 详细信息 */
.el-form--inline .el-form-item {
  margin-right: 100px;
}
/* 上传 */
.upload-demo >>> .el-upload-dragger {
  height: 220px;
}
</style>